<form name="createProjectForm" novalidate>
  <fieldset ng-disabled="disableInputs">
    <div class="form-group">
      <label for="name" class="required">Name</label>
      <span ng-class="{'has-error': (createProjectForm.name.$error.pattern && createProjectForm.name.$touched) || nameTaken}">
        <input class="form-control"
            name="name"
            id="name"
            placeholder="my-project"
            type="text"
            required
            take-focus
            minlength="2"
            maxlength="63"
            pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?"
            aria-describedby="nameHelp"
            ng-model="name"
            ng-model-options="{ updateOn: 'default blur' }"
            ng-change="nameTaken = false"
            autocorrect="off"
            autocapitalize="off"
            spellcheck="false">
      </span>
      <div>
        <span class="help-block">A unique name for the project.</span>
      </div>
      <div class="has-error">
        <span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.required && createProjectForm.name.$dirty">
          Name is required.
        </span>
      </div>
      <div class="has-error">
        <span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.minlength && createProjectForm.name.$touched">
          Name must have at least two characters.
        </span>
      </div>
      <div class="has-error">
        <span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.pattern && createProjectForm.name.$touched">
          Project names may only contain lower-case letters, numbers, and dashes.
          They may not start or end with a dash.
        </span>
      </div>
      <div class="has-error">
        <span class="help-block" ng-if="nameTaken">
          This name is already in use. Please choose a different name.
        </span>
      </div>
    </div>

    <div class="form-group">
      <label for="displayName">Display Name</label>
      <input class="form-control"
          name="displayName"
          id="displayName"
          placeholder="My Project"
          type="text"
          ng-model="displayName">
    </div>

    <div class="form-group">
      <label for="description">Description</label>
      <textarea class="form-control"
          name="description"
          id="description"
          placeholder="A short description."
          ng-model="description"></textarea>
    </div>

    <div class="button-group">
      <button type="submit"
          class="btn btn-primary"
          ng-class="{'dialog-btn': isDialog}"
          ng-click="createProject()"
          ng-disabled="createProjectForm.$invalid || nameTaken || disableInputs"
          value="">
        Create
      </button>
      <button
          class="btn btn-default"
          ng-class="{'dialog-btn': isDialog}"
          ng-click="cancelCreateProject()">
        Cancel
      </button>
    </div>
  </fieldset>
</form>
